<%@ page language="java" import="java.util.*" pageEncoding="Utf-8"%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="pragma" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache">  
<meta http-equiv="expires" content="0">  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
<meta http-equiv="description" content="This is my page">  
<!-- 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
-->  
<link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">  
  
<style type="text/css">  
.file-box {  
    position: relative;  
    width: 340px  
}  
  
.txt {  
    height: 22px;  
    border: 1px solid #cdcdcd;  
    width: 180px;  
    vertical-align: middle;  
    margin: 0;  
    padding: 0  
}  
  
.btn {  
    border: 1px solid #CDCDCD;  
    height: 24px;  
    width: 70px;  
    vertical-align: middle;  
    margin: 0;  
    padding: 0  
}  
  
.file {  
    position: absolute;  
    top: 0;  
    right: 80px;  
    height: 24px;  
    filter: alpha(opacity :   0);  
    opacity: 0;  
    width: 260px;  
    vertical-align: middle;  
    margin: 0;  
    padding: 0  
}  
</style>  
<script type="text/javascript">  
	var progress=0;
    function UpladFile() {  
        var fileObj = document.getElementById("file").files[0]; // js 获取文件对象  
        var FileController = "UserControllers/progress.do"; // 接收上传文件的后台地址   
        // FormData 对象---进行无刷新上传  
        var form = new FormData();  
        form.append("author", "hooyes"); // 可以增加表单数据  
        form.append("file", fileObj); // 文件对象  
        // XMLHttpRequest 对象  
        var xhr = new XMLHttpRequest();  
        xhr.open("post", FileController, true);  
        
		//上传完成后执行
        xhr.onload = function() {  
        	//进度条重新设置为零
  		  	setTimeout(function(){
  				$('#myModal').modal('hide');  
	        	$("#aa").html(0 + "%");
	  		    $("#processbar").attr("style", "width:" + 0 +"%");
  		 	},500);
        };  
                //监听progress事件  
        xhr.upload.addEventListener("progress", progressFunction, false);  
        xhr.send(form);  
    }  
    
   
    function progressFunction(evt) {  
        if (evt.lengthComputable) {  
        	progress = Math.round(evt.loaded/evt.total * 100);
  			$("#aa").html(progress + "%");
  		    $("#processbar").attr("style", "width:" + progress +"%");
        }  
  
    }  
</script>  
  
</head>  
  
<body style="width: 80%;height: 80%;margin: 0px auto;">  
    <div class="row bootstrap-admin-no-edges-padding">  
        <div class="col-md-12">  
            <div class="panel panel-default">  
                <div class="panel-heading">  
                    <div class="text-muted bootstrap-admin-box-title">文件管理</div>  
                </div>  
                <div class="bootstrap-admin-panel-content">  
                    <button class="btn btn-primary btn-lg" data-toggle="modal"  
                        data-target="#myModal">上传</button>  
                    <input type="text" id="test">  
                </div>  
            </div>  
        </div>  
    </div>  
  
    <!-- 模态框（Modal） -->  
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"  
        aria-labelledby="myModalLabel" aria-hidden="true">  
        <div class="modal-dialog">  
            <div class="modal-content"> 
            	
                <div class="modal-header">  
                    <button type="button" class="close" data-dismiss="modal"  
                        aria-hidden="true">×</button>  
                    <h4 class="modal-title" id="myModalLabel">文件上传进度</h4>  
                </div>  
                <div class="modal-body">  
<!--                     <progress id="progressBar" value="0" max="100"   -->
<!--                         style="width: 100%;height: 20px; "> </progress>   -->
<!--                     <span id="percentage" style="color:blue;"></span> <br>   -->
<!--                     <br>   -->
<!--                <div class="container"> -->
						<div class="progress progress-striped">
				  			<div class="progress-bar progress-bar-primary" id="processbar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:0%">
				    			<span id="aa">0%</span>
				  			</div>
						</div>
<!-- 				</div> -->
					<br> 
                    <div class="file-box">  
                        <input type='text' name='textfield' id='textfield' class='txt' />  
                        <input type='button' class='btn' value='浏览...' /> <input  
                            type="file" name="file" class="file" id="file" size="28"  
                            onchange="document.getElementById('textfield').value=this.value" />  
                        <input type="submit" name="submit" class="btn" value="上传"  
                            onclick="UpladFile()" />  
                          
                    </div>  
                </div>  
                <div class="modal-footer">  
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭  
                    </button>  
                </div>  
            </div>  
            <!-- /.modal-content -->  
        </div>  
        <!-- /.modal -->  
    </div>  
    <script type="text/javascript"  
        src="http://code.jquery.com/jquery-2.0.3.min.js"></script>  
    <script src="${ctx}/js/bootstrap.min.js"></script>  
    

</body>  
</html>  